<template>
  <div class="layout-parent w100 p10">
    <el-tabs type="border-card">
      <el-tab-pane>
        <template #label><vp-label zh="基本信息" en="Basic Info"/></template>
        <VoluntaryOrgHandle :id="id" :type="'view'" ref="taskRef" @dataEmits="getData"></VoluntaryOrgHandle>
      </el-tab-pane>
      <el-tab-pane v-if="formData.processid">
        <template #label><vp-label zh="流程记录" en="Process Record"/></template>
        <ProcessHistory :processInsId="formData.processid" />
      </el-tab-pane>
      <el-tab-pane v-if="formData.processid">
        <template #label><vp-label zh="流程图" en="Process Chart"/></template>
        <ProcessView :processInsId="formData.processid" />
      </el-tab-pane>
      <el-tab-pane>
        <template #label><vp-label zh="操作记录" en="Operation Record"/></template>
        <RcList :id="formData.id" ref="rcListRef"></RcList>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  toRefs,
} from "vue";
import request from "/@/utils/request";
import ProcessHistory from '/@/components/vp/workflow/ProcessHistory.vue';
import ProcessView from "/@/components/vp/workflow/ProcessView.vue";
import ProcessHandle from "/@/components/vp/workflow/VpProcessHandle.vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import VoluntaryOrgHandle from "./VoluntaryOrgHandle.vue";
import RcList from "/@/components/vp/operationRecord/VpOperationRecordCard.vue";

export default defineComponent({
  name: "viewReportOrgHandleHandle",
  props: {
    id: String,
  },
  components: { ProcessHistory, ProcessView, ProcessHandle, VoluntaryOrgHandle, RcList},
  setup(props) {
    const state = reactive({
      loading: false,
      submitLoading: false,
      type: "audit",
      formData: {
        id: "",
        processid: "",
        jb: null,
        processHandle: {},
      },
    });

    const loadWorkflow = () => {};
    onMounted(() => {
      loadWorkflow();
    });
    const { proxy } = getCurrentInstance() as any;
    const route = useRoute();
    const processHandleRef = ref();
    const taskRef = ref();

    const getData = (data: any) => {
      state.formData = data;
    };

    return {
      ...toRefs(state),
      ...toRefs(props),
      processHandleRef,
      taskRef,
      getData,
    };
  },
});
</script>